<template>
	<view class="my-box-container flex flex-column">
		<Nav id="nav" :bgColor="bgColor" title="免费福袋" @back="back"></Nav>
		<Tab id="tab" :tabs="tabs" :currentActive="currentActive" @tabChange="tabChange"></Tab>
		<swiper class="swiper" @change="swiperChange" :current="currentActive" :style="{height:swiperHeight}">
			<swiper-item v-for="(swiperItem,swiperIndex) in swiperList">
				<scroll-view scroll-y="true" class="scroll-view" v-if="swiperItem.list.length">
					<!-- @scrolltolower="api(swiperItem,'/api/fudai/freeboxlist')" -->
					<view class="box-list">
						<free-box-item class="free-box-item" v-for="(item,index) in swiperItem.list" :key="index"
							:value="item" @handleClick="goDetail(item)"></free-box-item>
					</view>
					<ns-loading :isRotate="true" v-if="swiperItem.loading"></ns-loading>
					<view class="load-finish" v-if="swiperItem.finish">亲，已经到底了哦~</view>
				</scroll-view>
				<view class="empty-wrapper flex justify-center align-center flex-column" v-else>
					<text class="empty-icon"></text>
					<text class="empty-text">这里什么都没有哦~</text>
					<navigator url="/magicpages/free_box/get_free_box" class="get-free-box">获取免费福袋 </navigator>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import Nav from "@/components/magic-box/magic-nav/index.vue"
	import navMixin from "@/common/js/nav.js"
	import Tab from "@/components/magic-box/magic-tab/index.vue"
	import pageApi from "@/common/js/pageApi.js";
	import FreeBoxItem from "./components/free_box_item.vue";
	export default {
		mixins: [navMixin, pageApi],
		components: {
			Nav,
			Tab,
			FreeBoxItem
		},
		computed: {
			isFreeListRefresh() {
				return this.$store.state.isFreeListRefresh || false;
			},
		},
		data() {
			return {
				swiperHeight: "",
				tabs: [{
					name: "未开盒"
				}, {
					name: "已开盒"
				}, {
					name: "已过期"
				}],
				currentActive: 0,
				swiperList: [{
					params: {
						type: 0,
						page: 0,
						page_size: 10,
					},
					loading: false,
					list: [],
					finish: false
				}, {
					params: {
						type: 1,
						page: 0,
						page_size: 10,
					},
					loading: false,
					list: [],
					finish: false
				}, {
					params: {
						type: 2,
						page: 0,
						page_size: 10,
					},
					list: [],
					loading: false,
					finish: false
				}],
			}
		},
		onLoad() {
			this.api(this.swiperList[this.currentActive], "/api/fudai/freeboxlist")
		},
		onShow() {
			if(this.isFreeListRefresh){
				this.swiperList[this.currentActive].list = []
				this.swiperList[this.currentActive].params.page = 0
				this.swiperList[this.currentActive].loading = false
				this.swiperList[this.currentActive].finish = false
				this.api(this.swiperList[this.currentActive], "/api/fudai/freeboxlist")
				this.$store.commit('setIsFreeListRefresh',false);
			}
			this.$nextTick(() => {
				this.calcSwiperHeight()
			})
		},
		methods: {
			//左右滚动
			swiperChange({
				detail: {
					current
				}
			}) {
				this.currentActive = current
				this.$nextTick(() => {
					this.calcSwiperHeight()
				})
				if (this.swiperList[this.currentActive].list.length) {
					return
				}
				this.api(this.swiperList[this.currentActive], "/api/fudai/freeboxlist")
			},
			calcSwiperHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#nav').boundingClientRect()
				query.select('#tab').boundingClientRect()
				query.exec(res => {
					let total = res.reduce((pre, item) => {
						return pre += item.height
					}, 0)
					const window_width = uni.getSystemInfoSync().windowWidth
					const window_height = uni.getSystemInfoSync().windowHeight
					const margin_top = 29 / 750 * window_width
					this.swiperHeight = (window_height - total - margin_top) + "px"
				})
			},
			tabChange(index) {
				if (this.currentActive == index) {
					return
				}
				this.currentActive = index
			},
			goDetail(item) {
				if (item.state == 1) {
					this.$util.redirectTo('/pages/magic-box/detail/detail', {
						magicBoxId: item.id,
						coupon_id: item.coupon_id
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.my-box-container {
		/deep/ .uni-popup__wrapper.uni-custom {
			border-top-left-radius: 45rpx;
			border-top-right-radius: 45rpx;

			.uni-popup__wrapper-box {
				border-top-left-radius: 45rpx;
				border-top-right-radius: 45rpx;
				overflow-y: visible;
			}
		}
	}

	.my-box-container /deep/ uni-radio .uni-radio-input-checked {
		background-color: #6E24FF !important;
		border-color: #6E24FF !important;
	}

	.my-box-container {
		height: 100%;

		.swiper {
			margin-top: 29rpx;
			// height: calc(100% - var(--status-bar-height) - 112rpx - 56rpx - 29rpx - 99rpx - constant(safe-area-inset-bottom));
			// height: calc(100% - var(--status-bar-height) - 112rpx - 56rpx - 29rpx - 99rpx - env(safe-area-inset-bottom));

			.scroll-view {
				height: 100%;
			}

			.box-list {
				padding-bottom: 30rpx;
				margin: 0 22rpx 0 19rpx;

				.box-item {
					margin-bottom: 21rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			.get-free-box {
				margin-top: 30rpx;
				width: 337rpx;
				height: 74rpx;
				background: linear-gradient(90deg, #6185FF, #8B60FF);
				box-shadow: 0px 4rpx 8rpx 0px rgba(97, 133, 255, 0.6);
				border-radius: 37rpx;
				font-size: 26rpx;
				line-height: 74rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}

	}
</style>
